<template>
	<view class="body">
		<xk-header title="车辆信息列表"></xk-header>
		<view class="util-bar">
		<view class="top-white-box">

		<!--搜索框 start-->
		<view class="search-box">
			<u-search shape="square" placeholder="车辆编号/车辆名称/资产所属部门/所属公司" height="42" :showAction="false" v-model="formdata.searchKey" @search="searchHandle"></u-search>
		</view>
		<!--搜索框 end-->

		<!--选项切换菜单 start-->
		<u-tabs
		     :current="tabIndex"
			 :list="tabsList"
			 @click="clickTabs"
			 lineWidth="40"
			 lineColor="#f56c6c"
			 :activeStyle="{
				 color: '#000000',
				 fontWeight: 'bold',
				 transform: 'scale(1.15)'
			 }"
			 :inactiveStyle="{
				 color: '#303133',
				 transform: 'scale(1.15)'
			 }"
			 itemStyle="padding-left: 15px; padding-right: 15px;height:45px;width:40%;"
		 ></u-tabs>
		 <!--选项切换菜单 end-->
		 </view>

		 <!--查询日期 start-->
		 <view class="select-search-btn">
			<u-row>
				<u-col span="4" offset="1">
					<view @click="showDate= true">
						<u--text suffixIcon="arrow-down-fill" size="15" bold iconStyle="font-size:15px;margin-left:2px;" :text="valueDate[tabIndex].date||'全部'"></u--text>
					</view>
					<u-datetime-picker
						:show="showDate"
						v-model="valuePickerDate"
						mode="year-month"
						@cancel="cancelDate"
						@confirm="confirmDate"
					></u-datetime-picker>
				</u-col>
				<u-col span="2"><view @click="resetSort()">重置</view></u-col>
			</u-row>
		 </view>
		 <!--查询日期 end-->
		 </view>

		 <!--列表 start-->
		 <swiper :current="tabIndex" class="list-swiper"
		 	@change="tabsChange"
		 	:style="'height:'+scrollViewHeight+'px'"
		 	>
		 	<swiper-item v-for="(tabItem, tabIndex) of tabsList" :key="tabIndex">
		 		<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" @scrolltolower="reachBottom" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="'height:'+scrollViewHeight+'px'">
		 			<view v-if="tabItem.data.length > 0" class="list-info">
		 				<view v-for="(item,index) of tabItem.data" :key="item.id" class="data-list">
							<view class="title">车辆编号：{{item.vehicle_no}}</view>
		 					<u-row customStyle="margin-bottom: 10px">
								<u-col span="4"><text class="grey-text">车辆名称：</text></u-col>
								<u-col span="8">{{item.vehicle_name}}</u-col>
		 					</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4"><text class="grey-text">资产所属部门：</text></u-col>
								<u-col span="8">{{item.assets_dept_name}}</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4"><text class="grey-text">车牌号码：</text></u-col>
								<u-col span="8">{{item.vehicle_number}}</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4"><text class="grey-text">所属公司：</text></u-col>
								<u-col span="8">{{item.company_name}}</u-col>
							</u-row>

							<view class="list-btn" @click="viewDetail" :data-id="item.vehicle_id">查看详情</view>

		 				</view>
						<view class="loadText-0"><u-loadmore loadingText="数据装载中..." :status="loadmoreStatus" /></view>
		 			</view>
		 			<view class="empty-view" v-else>
						<view v-if="isloading" class="loadText-0"><u-loadmore loadingText="数据装载中..." :status="loadmoreStatus" /></view>
						<view v-else>
							<u-empty mode="list" :icon="(imgUrl+'/wx/empty_data_icon.png')" text="哎呀，该界面暂无内容~"></u-empty>
						</view>
		 			</view>
		 		</scroll-view>
		 	</swiper-item>
		 </swiper>
		 <!--列表 end-->
		 <view v-if="$util.getRights().po_reserve_apply&&tabIndex===0">
		 <view class="common-bottom-view">
		 	<view @click="viewApply" class="common-btn">用车申请</view>
		 </view>
		 <view style="height:100px;"></view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				tabIndex:0,
                tabsList: [{
                    name: '可预约',
					badge: {value:0,},
					startNum: 0,
					isAll: false,
					data: []
                }, {
                    name: '不可预约',
					startNum: 0,
					isAll: false,
					data: []
                }],
				showDate:false,
				valuePickerDate:uni.$u.timeFormat(Number(new Date()), 'yyyy-mm'),
				valueDate: [{
					date:'',
				}, {
					date:'',
				}],
				scrollViewHeight: 0,
				triggered:false,
				isloading:false,
				loadmoreStatus:'nomore',
				formdata:{
					start:0,
					searchKey:'',
					dateMonth:'',
					spStatus:'',
				}
			}
		},
		onLoad(options) {
			uni.$on('refreshVehicleInfo', ()=>{
				console.log('========refreshVehicleInfo')
				this.resetTab()
				this.queryListInfo(true)
			})
		},
		onShow(){
			this.queryListInfo(true)
		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		onUnload(){
			uni.$off('refreshVehicleInfo')
		},
		methods: {
			createFix(){
				uni.navigateTo({
					url: '/pagesA/estate-delisting/estate-delisting-apply'
				})
			},
			viewDetail(id){
				console.log('22222',id.currentTarget.dataset.id)
				uni.navigateTo({
					url: '/pagesB/vehicle-info/vehicle-info-detail?vehicle_id='+id.currentTarget.dataset.id
				})
			},
			viewApply(){
				uni.navigateTo({
					url: '/pagesB/vehicle-info/vehicle-info-apply'
				})
			},
			tabsChange(e){
				this.tabIndex = e.target.current
				this.queryListInfo(true)
			},
			resetTab(){
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
					item.data = []
				}
			},
            clickTabs(item) {
                console.log('item', item);
				this.tabIndex=item.index;
				this.queryListInfo(true)
            },
			cancelDate(){
				this.showDate=false;
			},
			confirmDate(e){
				//console.log(uni.$u.timeFormat(new Date(e.value), 'yyyy-mm'));
				this.valueDate[this.tabIndex].date=uni.$u.timeFormat(new Date(e.value), 'yyyy-mm')
				//console.log(this.valueDate)
				this.showDate=false;
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
				}
				this.queryListInfo()
			},
			pullDownRefresh(){
				if(this.triggered){
					return;
				}
				this.triggered = true;
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
					item.data = []
				}
				this.queryListInfo(true)
			},
			reachBottom(){
				this.queryListInfo()
			},
			searchHandle(){
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
				}
				this.queryListInfo(true)
			},
			stopRefresh(){
				setTimeout(()=>{
					this.triggered = false;
					console.log('stop')
				}, 500)
			},
			resetSort() {
				if (this.valueDate[this.tabIndex].date) {
					this.valueDate[this.tabIndex].date = ""
					this.resetTab()
					this.queryListInfo()
				}
			},
			resetTab(){
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
					item.data = []
				}
			},
			async queryListInfo(flag) {
				console.log('queryListInfo',this.tabsList)
				let startNum = this.tabsList[this.tabIndex].startNum;
				if(flag === true && startNum != 0) {
					this.stopRefresh()
					return;
				}
				if(this.tabsList[this.tabIndex].isAll) {
					this.stopRefresh()
					return; // 加载完成
				}

				//选项卡位置：0申请中1审批2完成
				var statusName='CAN_RESERVE';
				if(this.tabIndex==1){statusName='NOT_RESERVE';}

				//初始化查询条件
				let pageSize=3;//翻页：每页多少条记录
				let params = {
					start:startNum,
					limit:pageSize
				}
				//搜索“单号/经办人/申请人单位”关键词
				if(this.formdata.searchKey){
					params.searchKey = this.formdata.searchKey
				}
				//加入筛选日期条件
				if (this.valueDate[this.tabIndex].date) {
					params.dateMonth = this.valueDate[this.tabIndex].date
				}
				let res=[];
				this.isloading=true
				this.loadmoreStatus='loading'
				res = await this.$api.get_campusVehicleData_getCampusVehicleList(params,statusName)
				//选项卡位置：0申请中1审批2完成，返回获取数据。
				if(this.tabIndex===0){res = res.CAN_RESERVE}
				if(this.tabIndex==1){res = res.NOT_RESERVE}
				//返回数据，赋值到对应选项内容列表
				if(res.length == 0 && this.tabsList[this.tabIndex].data.length == 0){
					this.isloading=false;
					this.loadmoreStatus='nomore';
					this.stopRefresh();
					return
				}
				console.log('res',res)
				//默认20条记录为一页
				if(res.length < pageSize){
					this.tabsList[this.tabIndex].isAll = true
				}
				if(this.tabsList[this.tabIndex].startNum == 0){
					this.tabsList[this.tabIndex].data = res
				}else{
					this.tabsList[this.tabIndex].data = this.tabsList[this.tabIndex].data.concat(res)
				}
				this.tabsList[this.tabIndex].startNum += pageSize
				this.stopRefresh();
				this.isloading=false
				this.loadmoreStatus='nomore'
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.top-white-box{
	background:#FFFFFF;
	margin-bottom:-2px;
}
.search-box{
	padding:10px 15px 10px 15px;
}
.select-search-btn{
	margin:15px 0px 10px 10px;
}
.data-list{
	background:#FFFFFF;
	padding:20px 10px 0px 10px;
	margin:10px;
	border-radius:5px;
	font-size:15px;
	.title{
		font-size:17px;
		font-weight:bold;
		color:#333333;
		margin-bottom:15px;
	}
	.grey-text{
		color:#999999;
	}
	.list-btn{
		text-align: center;
		border-top:1px solid #F5F5F5;
		height:52px;
		line-height:52px;
		color:#0055FE;
		font-size:17px;
		font-weight:bold;
	}
}
.loadText-0{
	padding:5px 0px 20px 0px;
}
.loadText-1{
	padding:5px 0px 110px 0px;
}
.detail{
	text-align:center;
	color:#000000;
}
.yuyue{
	text-align:center;
}
</style>
